<template>
  <a-card title="角色列表">
    <template #extra>
      <a href="#" @click="addRoleHandel">新增角色</a>
    </template>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      bordered
      :pagination="false"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a @click="handelEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handelDelete(record)" style="color: red">删除</a>
        </template>
      </template>
    </a-table>
  </a-card>
  <a-modal
    v-model:open="open"
    :title="formState.id ? '编辑' : '新增'"
    :footer="false"
  >
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="id" name="id" v-show="formState.id">
        <a-input v-model:value="formState.id" disabled />
      </a-form-item>
      <a-form-item
        label="名称"
        name="label"
        :rules="[{ required: true, message: 'Please input your label!' }]"
      >
        <a-input v-model:value="formState.label" />
      </a-form-item>
      <a-form-item label="描述" name="desc">
        <a-textarea
          v-model:value="formState.desc"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item label="关联菜单" name="menu">
        <FormTree v-model:value="formState.menu"></FormTree>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
        <a-button type="primary" html-type="submit">
          {{ formState.id ? "更新" : "保存" }}
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { roleList, roleDel, roleEdit, roleAdd } from "@/api/role";
import FormTree from "@/components/FormTree";

const open = ref(false);
const formState = ref({
  id: "",
  label: "",
  desc: "",
  menu: [],
});

const dataSource = ref([]);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
  },
  {
    title: "名称",
    dataIndex: "label",
    key: "label",
  },
  {
    title: "描述",
    dataIndex: "desc",
    key: "desc",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
  },
];

/**
 *  编辑
 * @param {*} record
 */
const handelEdit = (record) => {
  console.log(record);
  formState.value = {
    ...record,
    menu: record.menu.split(",") || [],
  };
  open.value = true;
};
/**
 *  删除
 * @param {*} record
 */

const handelDelete = async (record) => {
  if (!record.id) return;
  const { success, msg } = await roleDel({ id: record.id });
  if (success) {
    message.success(msg);
    getRoleList();
  } else {
    message.error(msg);
  }
};

/**
 *  获取角色列表
 */
const getRoleList = async () => {
  const { success, data, msg } = await roleList();
  if (success) {
    dataSource.value = data.rows || [];
  } else {
    message.error(msg);
  }
};

/**
 * 新增
 */
const addRoleHandel = async () => {
  formState.value = {
    id: "",
    label: "",
    desc: "",
    menu: [],
  };
  open.value = true;
};

const addOrEdit = async (values) => {
  let params = { ...values, menu: values.menu.join(",") };
  const { success, msg } = values.id
    ? await roleEdit(params)
    : await roleAdd(params);
  if (success) {
    message.success(msg);
    getRoleList();
    open.value = false;
  } else {
    message.error(msg);
  }
};

/**
 * 成功
 * @param {*} values
 */
const onFinish = async (values) => {
  console.log("Success:", values);
  addOrEdit(formState.value);
};
/**
 * 失败
 * @param {*} errorInfo
 */
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

onMounted(() => {
  getRoleList();
});
</script>
<style lang='scss' scoped>
</style>